<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
</head>
<body>
    <input id="fileInput" type="file"/>

    <script>
        const fileInput = document.getElementById('fileInput');

        // 每一块20k
        const chunkSize = 1024 * 20;

        fileInput.onchange = async () => {
            const file = fileInput.files[0];
            const chunks = []
            for (let i = 0; i < file.size; i += chunkSize) {
                const chunk = file.slice(i, i + chunkSize);
                chunks.push(chunk);
            }

            const random = Math.random().toString(36).substring(2, 5);

            const fileName = random + '_' + file.name

            const tasks = []

            for (let i = 0; i < chunks.length; i++) {
                const chunk = chunks[i];
                const formData = new FormData();
                formData.set('name', fileName + '-' + i)
                formData.append('files', chunk);
                tasks.push(axios.post('http://localhost:3000/file', formData)) 
            }

            await Promise.all(tasks)

            await axios.get(`http://localhost:3000/merge?fileName=${fileName}`);
        }
    </script>
</body>
</html>